{% extends 'base.html' %}

{% block title %}{{ post.title }} - Will's Blog{% endblock %}

{% block content %}
<div class="row">
    <div class="col-md-8">
        <article class="blog-post">
            <h1 class="mb-3">{{ post.title }}</h1>
            
            <p class="text-muted mb-4">
                <small>
                    <i class="bi bi-person"></i> {{ post.author.username }} | 
                    <i class="bi bi-calendar"></i> {{ post.created.strftime('%Y-%m-%d') }} | 
                    <i class="bi bi-eye"></i> {{ post.views }} 次阅读
                    {% if post.tags %}
                        | <i class="bi bi-tags"></i> 
                        {% for tag in post.tags %}
                            <a href="{{ url_for('main.tag', slug=tag.slug) }}" class="badge bg-secondary text-decoration-none">{{ tag.name }}</a>
                        {% endfor %}
                    {% endif %}
                </small>
            </p>
            
            {% if post.featured_image %}
                <img src="{{ post.featured_image }}" class="img-fluid rounded mb-4" alt="{{ post.title }}">
            {% endif %}
            
            <div class="blog-content">
                {{ post.body_html|safe }}
            </div>
        </article>
        
        <hr class="my-5">
        
        <!-- 评论区 -->
        <div class="comments-section">
            <h3>评论 ({{ post.comments.filter_by(approved=True).count() }})</h3>
            
            {% if current_user.is_authenticated %}
                <div class="card mb-4">
                    <div class="card-body">
                        <form method="post" action="{{ url_for('main.comment', post_id=post.id) }}">
                            {{ form.csrf_token }}
                            <div class="mb-3">
                                <label for="comment" class="form-label">发表评论</label>
                                <textarea class="form-control" id="comment" name="body" rows="3" required></textarea>
                            </div>
                            <button type="submit" class="btn btn-primary">提交</button>
                        </form>
                    </div>
                </div>
            {% else %}
                <div class="alert alert-info">
                    请 <a href="{{ url_for('auth.login') }}">登录</a> 后发表评论
                </div>
            {% endif %}
            
            {% if post.comments.filter_by(approved=True).count() > 0 %}
                {% for comment in post.comments.filter_by(approved=True, parent_id=None).order_by('created') %}
                    <div class="card mb-3">
                        <div class="card-body">
                            <h5 class="card-title">{{ comment.author.username }}</h5>
                            <h6 class="card-subtitle mb-2 text-muted">{{ comment.created.strftime('%Y-%m-%d %H:%M') }}</h6>
                            <div class="card-text">{{ comment.body_html|safe }}</div>
                            
                            {% if current_user.is_authenticated %}
                                <button class="btn btn-sm btn-outline-secondary mt-2 reply-btn" 
                                        data-comment-id="{{ comment.id }}">回复</button>
                                
                                <div class="reply-form mt-3 d-none" id="reply-form-{{ comment.id }}">
                                    <form method="post" action="{{ url_for('main.reply', comment_id=comment.id) }}">
                                        <div class="mb-3">
                                            <textarea class="form-control" name="body" rows="2" required></textarea>
                                        </div>
                                        <button type="submit" class="btn btn-sm btn-primary">提交回复</button>
                                    </form>
                                </div>
                            {% endif %}
                            
                            <!-- 回复 -->
                            {% if comment.replies.filter_by(approved=True).count() > 0 %}
                                <div class="replies mt-3">
                                    {% for reply in comment.replies.filter_by(approved=True).order_by('created') %}
                                        <div class="card mb-2">
                                            <div class="card-body py-2">
                                                <h6 class="card-title">{{ reply.author.username }}</h6>
                                                <h6 class="card-subtitle mb-2 text-muted">{{ reply.created.strftime('%Y-%m-%d %H:%M') }}</h6>
                                                <div class="card-text">{{ reply.body_html|safe }}</div>
                                            </div>
                                        </div>
                                    {% endfor %}
                                </div>
                            {% endif %}
                        </div>
                    </div>
                {% endfor %}
            {% else %}
                <div class="alert alert-light">
                    暂无评论，快来发表第一条评论吧！
                </div>
            {% endif %}
        </div>
    </div>
    
    <div class="col-md-4">
        <div class="card mb-4">
            <div class="card-header">作者信息</div>
            <div class="card-body">
                <h5 class="card-title">{{ post.author.name or post.author.username }}</h5>
                {% if post.author.about_me %}
                    <p class="card-text">{{ post.author.about_me }}</p>
                {% endif %}
            </div>
        </div>
        
        <div class="card mb-4">
            <div class="card-header">相关文章</div>
            <div class="card-body">
                <ul class="list-unstyled">
                    {% set related_posts = post.author.posts.filter_by(published=True).all()|sort(attribute='created', reverse=True) %}
                    {% for related_post in related_posts %}
                        {% if related_post.id != post.id and loop.index <= 5 %}
                            <li class="mb-2">
                                <a href="{{ url_for('main.post', slug=related_post.slug) }}">{{ related_post.title }}</a>
                            </li>
                        {% endif %}
                    {% endfor %}
                </ul>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block scripts %}
<script>
    document.addEventListener('DOMContentLoaded', function() {
        const replyButtons = document.querySelectorAll('.reply-btn');
        
        replyButtons.forEach(button => {
            button.addEventListener('click', function() {
                const commentId = this.getAttribute('data-comment-id');
                const replyForm = document.getElementById(`reply-form-${commentId}`);
                
                if (replyForm.classList.contains('d-none')) {
                    replyForm.classList.remove('d-none');
                } else {
                    replyForm.classList.add('d-none');
                }
            });
        });
    });
</script>
{% endblock %}